<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { switchNavBarTheme } from '@/utils/common'
import { reactive, ref } from 'vue'
import type { TransactionDTO } from '@/types/pay'
import { TransactionType } from '@/types/constants'
import useUserInfoStore from '@/stores/userInfo'
import { useToast } from 'wot-design-uni'
import {rechargeOrWithdrawalAPI} from "@/api/pay";

const transactionDTO = reactive<TransactionDTO>({
  transactionType: TransactionType.INCOME,
  amount: '',
})
const balance = ref<string>('0.00')
onLoad(option => {
  uni.setNavigationBarTitle({ title: option!.transactionType == 0 ? '充值' : '提现' })
  switchNavBarTheme()
  if (option!.transactionType == 1) {
    transactionDTO.transactionType = TransactionType.EXPENDITURE
    balance.value = option!.balance
  }
})

const userInfoStore = useUserInfoStore()
const phone = ref(userInfoStore.userInfo?.phone)
const visible = ref<boolean>(true)
const rechargeList = reactive<string[]>(['10', '20', '50', '100'])

const clickItem = (item: string) => {
  visible.value = true
  transactionDTO.amount = item
}
const allWithdrawal = () => {
  visible.value = true
  if (Number(balance.value) > 0) transactionDTO.amount = balance.value
}
const inputChange = (key: string | number) => {
  switch (key) {
    case '.':
      if (transactionDTO.amount === '') transactionDTO.amount = '0.'
      else if (transactionDTO.amount.indexOf('.') === -1) transactionDTO.amount += '.'
      break;
    case 0:
      if (transactionDTO.amount === '0' || transactionDTO.amount === '0.0') return
      else if (transactionDTO.amount.indexOf('.') !== -1 && transactionDTO.amount.split('.')[1].length >= 2) return
      else transactionDTO.amount += key
      break;
    default:
      if (transactionDTO.amount.indexOf('.') !== -1 && transactionDTO.amount.split('.')[1].length >= 2) return
      else if (transactionDTO.amount === '0') transactionDTO.amount = '' + key
      else transactionDTO.amount += key
  }
}

const toast = useToast()
const submit = async () => {
  // 校验金额格式为xx.xx
  if (!/^\d+(\.\d{1,2})?$/.test(transactionDTO.amount)) return toast.show('金额格式不正确')
  if (transactionDTO.transactionType === TransactionType.INCOME) {
    if (Number(transactionDTO.amount) > 10000) return toast.show('输入金额已超过1万元')
  }
  else {
    if (Number(transactionDTO.amount) > Number(balance.value)) return toast.show('输入金额已超过可提现余额')
  }
  const res = await rechargeOrWithdrawalAPI(transactionDTO)
  if (res.code === 200) toast.show(transactionDTO.transactionType === TransactionType.INCOME ? '充值成功' : '提现成功')
  else toast.show(transactionDTO.transactionType === TransactionType.INCOME ? '充值失败' : '提现失败')
}
</script>

<template>
  <wd-toast />
  <view class="content">
    <view class="mode">
      <view>{{ transactionDTO.transactionType === TransactionType.INCOME ? '充值方式' : '到账方式' }}</view>
      <view class="alipay">
        <image style="height: 48rpx; width: 62rpx" src="@/static/images/alipay.png" />
        支付宝&nbsp;
        <wd-text :text="phone" mode="phone" :format="true" />
      </view>
    </view>
    <view class="amount">
      <view class="top">{{ transactionDTO.transactionType === TransactionType.INCOME ? '充值金额' : '提现金额' }}</view>
      <view class="middle">
        <wd-input
          @click="visible = true" custom-input-class="custom-input"
          v-model="transactionDTO.amount" placeholder="" use-label-slot 
          label-width="0" clearable custom-style="z-index: 1;"
        >
          <template #label>
            <view style="font-size: 60rpx; margin: 20rpx 0 0 -40rpx;">￥</view>
          </template>
        </wd-input>
      </view>
      <view class="bottom">
        <view v-if="transactionDTO.transactionType === TransactionType.INCOME" class="common">
          <view style="display: flex;">
            <wd-button @click="clickItem(item)" v-for="item in rechargeList" custom-class="custom-class" type="info" size="small" :round="false">{{ item }}</wd-button>
          </view>
          <wd-text custom-class="bottom-font" text="限额1万" />
        </view>
        <view v-else class="common">
          <wd-text custom-class="bottom-font" :text="'可提现余额 ￥' + balance" />
          <wd-text @click="allWithdrawal" custom-style="z-index: 1;" custom-class="bottom-font" type="primary" text="全部提现" />
        </view>
      </view>
    </view>
  </view>
  <wd-button @click="submit" custom-style="width: 84%; margin-top: 120rpx; z-index: 1;" block size="large">{{ transactionDTO.transactionType === TransactionType.INCOME ? '充值' : '提现' }}</wd-button>
  <wd-number-keyboard 
    @input="inputChange" 
    @delete="transactionDTO.amount = transactionDTO.amount.slice(0, -1)" 
    v-model:visible="visible" :z-index="0" 
    mode="custom" extra-key="." close-text="完成" 
  />
</template>

<style scoped lang="scss">
.content {
  width: 84%;
  height: 350rpx;
  position: relative;
  top: 30rpx;
  margin: auto;
  padding: 20rpx 5%;
  border-radius: 20rpx;
  background-color: var(--front-color);
  display: flex;
  flex-direction: column;
  .mode {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .alipay {
      display: flex;
      justify-content: center;
    }
  }
  .amount {
    flex: 4;
    display: flex;
    flex-direction: column;
    .top {
      flex: 1;
      display: flex;
      align-items: flex-end;
    }
    .middle {
      flex: 2;
      display: flex;
      align-items: flex-end;
      border-bottom: 1rpx solid #e5e5e5;
      .sign {
        font-size: 70rpx;
      }
      :deep(.custom-input) {
        height: 80rpx;
        font-size: 80rpx;
      }
    }
    .bottom {
      flex: 1;
      .common {
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        :deep(.custom-class) {
          height: 50rpx;
          width: 100rpx;
          border-radius: 16rpx;
          z-index: 1;
          margin-right: 10rpx;
        }
      }
      :deep(.bottom-font) {
        font-size: 26rpx;
        margin-bottom: 6rpx;
      }
    }
  }
}
</style>